<template>
  <div>
    <h4 class="boardName" @click="gotoThat">
      生产统计
      <a-icon type="right" />
    </h4>
    <div class=" lightBox progressdiv" style="height:380px; overflow-y: scroll;">
      <div>
        <h6>
          产量排名
        </h6>
        <div v-if="productrank.length > 0">
          <div v-for="(item, index) in productrank" :key="index + 'd'" class="progressdivone">
            <span class="progressOnename">{{ item.macNumb }}</span>
            <a-progress
              :format="(percent) => formatPercent(percent, item)"
              :percent="item.countRate*100"
              style="width:54%"
            />
          </div>
        </div>
        <a-empty v-else />

        <h6>
          运行时间排名
        </h6>
        <div>
          <div v-if="timerank.length > 0">
            <div v-for="(item, index) in timerank" :key="index + 'i'" class="progressdivone">
              <span class="progressOnename">{{ item.macNumb }}</span>
              <a-progress
                :format="(percent) => formatPercent2(percent, item)"
                :percent="item.timeRate*100"
                strokeColor="#FDBA00"
                style="width:54%"
              />
            </div>
          </div>
          <a-empty v-if="timerank.length <= 0" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    productrank: {
      type: Array,
      default: () => []
    },
    timerank: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {};
  },
  watch: {
    productrank(val) {
      return val;
    },
    timerank(val) {
      if (val) {
        return val;
      } else {
        return [];
      }
    }
  },
  methods: {
    gotoThat() {
      this.$store.commit("board/HeadNavType", 2);
      localStorage.setItem("navType", 2);
      this.$router.push("/statistics");
    },

    formatPercent(percent, item) {
      return item.count + "件";
    },
    formatPercent2(percent, item) {
      return item.produceTime;
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../light.less';
</style>
